﻿<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<link rel="stylesheet" href="/lobsteruiframe/weui/css/weui.css" />
		<link rel="stylesheet" href="/lobsteruiframe/weui/css/weuix.css" />
		<script src="/lobsteruiframe/weui/js/zepto.min.js"></script>
		<script src="/lobsteruiframe/weui/js/zepto.weui.js"></script>
		<script src="/jslib/lobster.js"></script>
		
		<style>
			.agree {
				display: flex;
				align-items: center;
				font-size: 13px;
			}

			.weui-agree {
				padding-right: unset;
			}
		</style>
	</head>

	<body ontouchstart>
		<div class="weui-btn_default weui-header ">
			<div class="weui-header-left"> <a class="icon icon-109 f-green" href="#"
					onclick="self.location=document.referrer;"></a> </div>
			<h1 class="weui-header-title f-green">登录</h1>
		</div>

		<div class="page-hd">
			<!-- <h1 class="page-hd-title">
				登录
			</h1> -->
			<p class="page-hd-desc">输入手机号码获取短信验证码进行登录</p>
		</div>
		<div class="page-bd-15">
			<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">手机号</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" placeholder="请输入手机号" type="tel" id="mobile">
					</div>

				</div>
				<div class="weui-cell weui-cell_vcode">
					<div class="weui-cell__hd">
						<label class="weui-label">验证码</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" placeholder="验证码" type="number" id="code">
					</div>
					<div class="weui-cell__ft">
						<button class="weui-vcode-btn" id="SendMsgCode">获取验证码</button>
					</div>
				</div>

			</div>
			<div class="weui-cells__tips"></div>
			<div class="weui-btn-area">
				<a href="javascript:void(0);" class="weui-btn weui-btn_primary" id="loginBySms">登录</a>
			</div>

			<div class="weui-btn-area">
				<a href="javascript:;" class="weui-btn weui-btn_plain-primary" id="loginByWx">微信登录</a>
			</div>
			<div class="agree">
				<label for="weuiAgree" class="weui-agree">
					<input id="weuiAgree" class="weui-agree__checkbox" type="checkbox">
					<span class="weui-agree__text">
						阅读并同意
					</span>
				</label>
				<a href="javascript:;" id="agreement">《相关条款》</a>
			</div>
		</div>
	</body>

</html>

<script>
	lobsterh5.main({
		data: {
			codeDuration: 0, //发送短信读秒
			loginBtnLoading: false,
			backUrl: '', //回调地址
			smsKey: '', //短信密钥
			appId: '', //微信公众号appid
			code: '', //微信网页授权成功回调参数:code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期
			state: '' //微信网页授权成功回调参数:重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
		},
		//初始化页面
        pageload: function () {
			this.initevent();
			this.data.backUrl = lobsterh5.GetUrlParam("callback");
			this.data.code = lobsterh5.GetUrlParam("code");
			//微信授权成功回调
			if (this.data.code) {
				this.authorizeCallback();
			}
		},
		//初始化事件
		initevent: function () {
			var self = this;
			$("#SendMsgCode").click(function () {
				self.sendSmsCode();
			})
			$("#loginBySms").click(function () {
				self.loginBySms();
			})

			$("#loginByWx").click(function () {
				self.wxAuthorize();
			})

			$("#agreement").click(function () {
				location.href = "agreement.html";
			})

			window.onunload = function () {
				self.data.code = '';
			}
		},
		//发送验证码
		sendSmsCode: function () {
			var self = this;
			var mobile = $("#mobile").val();
			if (!mobile) {
				$.toast("请输入手机号码", "forbidden");
				return
			}
			if (!/^1\d{10}$/.test(mobile)) {
				$.toast("手机号码填写错误", "forbidden");
				return
			}

			lobsterh5.GET("/admin/v1/CLogin/SendSmsVerCode", { phoneNumber: mobile, smsKey: "" }).then(data => {
				self.data.smsKey = data.smsKey;
                $.toast('验证码发送成功，请注意查收', 'text');
                $("#SendMsgCode").attr("disabled", true);
                self.data.codeDuration = 60
                var codeInterVal = setInterval(() => {
                    self.data.codeDuration--
                    $("#SendMsgCode").text(self.data.codeDuration + 's');
                    if (self.data.codeDuration === 0) {
                        if (codeInterVal) {
                            clearInterval(codeInterVal)
                            codeInterVal = null
                            $("#SendMsgCode").removeAttr("disabled");
                            $("#SendMsgCode").text('获取验证码');
                        }
                    }
				}, 1000)
			}).catch(res => {
                $.toast("发送验证码失败", "forbidden");
			});

		},
		//登录
		loginBySms: function () {
			var self = this;
			var mobile = $("#mobile").val();
			if (!mobile) {
				$.toast("请输入手机号码", "forbidden");
				return
			}
			var code = $("#code").val();
			if (!code) {
				$.toast("请输入验证码", "forbidden");
				return
			}
			if (!/^1[34578]\d{9}$/.test(mobile)) {
				$.toast("手机号码填写错误", "forbidden");
				return
			}
			if (!$("#weuiAgree").is(':checked')) {
				$.toast("请先阅读并同意相关条款", "forbidden");
				return
			}
			$.showLoading("登录中...");

			lobsterh5.POST("/admin/v1/CLogin/LoginByPhone", { phone: mobile, smsKey: self.data.smsKey, smsCode: code, workId: lobsterh5.GetWorkId() || -1 }).then(data => {
                $.hideLoading();
				$.toast("登录成功", "text");
				lobsterh5.SucceedLogin(data);

				self.reDirectTo();
			}).catch(res => {
                $.toast(res.msg, "forbidden");
			});

		},
		//微信授权
		wxAuthorize: function () {
			if (!$("#weuiAgree").is(':checked')) {
				$.toast("请先阅读并同意相关条款", "forbidden");
				return
			}
			this.getAuthorizeUrl().then(data => {
				location.href = data.url;
			}).catch(res => {
				$.toast(res.msg, "forbidden");
			})
		},
		//获取微信用户信息
		getWxUserInfo: function () {
			var self = this;
			return new Promise((resolve, reject) => {
                lobsterh5.GET("/admin/v1/CLogin/GetWXUserInfo", { code: self.data.code }).then(data => {
                    resolve(data);
                }).catch(res => {
                    self.data.loginBtnLoading = false
                    reject(res);
				});
			})
		},
		//获取微信授权跳转地址
		getAuthorizeUrl: function () {
			var self = this;
			return new Promise((resolve, reject) => {

				lobsterh5.GET("/admin/v1/CLogin/GetAuthorizeUrl", { redirectUrl: location.href }).then(data => {
                    resolve(data);
				}).catch(res => {
                    self.data.loginBtnLoading = false
                    reject(res);
				});
			})
		},
		//微信授权成功回调
		authorizeCallback: function () {
			var self = this;
			this.getWxUserInfo().then(data => {
				console.log(data)

				if (data.hasweixin == 0) {//未绑定微信
					let p = encodeURI(JSON.stringify(data.userinfo));
					location.href = "bindphone.html?backUrl=" + self.data.backUrl + "&user=" + encodeURI(p); //去绑定手机号
				} else {
					this.wxLogin(data);
				}
			}).catch(res => {
				console.log(res)
				$.toast(res.msg, "forbidden");
			})
		},
		//微信登录
		wxLogin: function (data) {
			var self = this;
			let user = data.userinfo;
			$.showLoading("登录中...");

			lobsterh5.POST("/admin/v1/CLogin/LoginByWeiXin", {
				nickName: user.nickname,
				imgUrl: user.headimgurl,
				openId: user.openid,
				unionId: user.unionid,
				sex: user.sex,
				workId: lobsterh5.GetWorkId() || -1
			}).then(data => {
				$.hideLoading();
				$.toast("登录成功", "text");
				lobsterh5.SucceedLogin(data);
				self.reDirectTo();
			}).catch(res => {
                self.data.loginBtnLoading = false
                $.toast(res.msg, "forbidden");
			});
		},
		/**
		 * 跳转页面
		 * **/
		reDirectTo: function () {
			var self = this;
			if (self.data.backUrl) {
				location.replace(self.data.backUrl);
			}
		},
	}, false);
</script>